<template>
  <el-input 
    ref="input"
    v-model="password" 
    class="component-password" 
    maxlength="6" 
    type="password" 
    align="center" 
    :size="size"
  ></el-input>
</template>

<script>
import { ref, watch, nextTick } from 'vue'

export default {
  props: ['size'],
  setup(props, context) {
    // 密码
    const password = ref('')
    // 输入框
    const input = ref(null)

    // 清空输入框
    const empty = async(focus) => {
      // 占位数组
      password.value = ''
      // 等待渲染完成
      await nextTick()
      // 焦点
      if(focus) input.value.focus()
    }

    watch(password, () => {
      if(password.value.length == '6') {
        context.emit('over', password.value)
      }
    })

    empty()

    return {
      password,
      input,
      empty
    }
  }
}
</script>